.#{$prefix}-desktop {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.#{$prefix}-desktop-dragging {
  z-index: 20; 
}

.#{$prefix}-desktop-container {
  width: 100%;
  position: relative;
  overflow-y:hidden;
  -webkit-overflow-scrolling: touch;  
}

.#{$prefix}-desktop-logo {
    position: absolute;
    right:30px;
    bottom:55px;
    line-height: 24px;
    font-size:18px;
    color:$color;
    opacity: 0.8;
}

.#{$prefix}-desktop-logo:hover{
    opacity: 1;
}

.#{$prefix}-desktop-logo a {
     font-size:20px;
    color:$color;
    text-decoration: none;
}

.#{$prefix}-desktop-logo img{
    height:24px;
    width:24px;
    margin-top:-5px;
}

.#{$prefix}-desktop-mobile .#{$prefix}-desktop-logo{
    display: none;
}

.#{$prefix}-ie8 .#{$prefix}-metro-container {
  overflow: auto; }


.#{$prefix}-shortcut{
    position:absolute;
    height:72px;
    width:72px;
    color:$color;
    cursor: pointer;
    transition-property:transform,left,top;
    transition-duration:.2s;
}

.#{$prefix}-desktop-dragging .#{$prefix}-shortcut{
      transition: none;
      -webkit-transition:none;
}

.#{$prefix}-shortcut:hover{
    background: rgba($bgcolorR, $bgcolorG, $bgcolorB,0.3);
    outline: 1px solid rgba($bgcolorR, $bgcolorG, $bgcolorB, 0.4); 
}
.#{$prefix}-shortcut.selected{
    background: rgba($bgcolorR, $bgcolorG, $bgcolorB,0.5);
    outline: 1px solid rgba($bgcolorR, $bgcolorG, $bgcolorB, 0.6); 
}
.#{$prefix}-shortcut:active {
    -ms-transform: scale(0.97,0.97) !important;
    -webkit-transform: scale(0.97,0.97) !important;
    transform: scale(0.97,0.97)!important;
}

.#{$prefix}-shortcut-icon{
    position:absolute;
    top:12px;
    left:18px;
    height:36px;
    width:36px;
}

.#{$prefix}-shortcut-icon img{
    width:100%;
    height:100%;
}

@media screen and (max-width:1024px) {
   .#{$prefix}-desktop-mobile .#{$prefix}-shortcut{
        position:relative;
         float:none;
        display: inline-block;
        margin:10px;
    }
    
    .#{$prefix}-desktop-mobile .#{$prefix}-desktop-container {
        padding:20px;
        text-align: center;
        overflow-y:auto;
    }
}

@media screen and (max-width:450px) {
    .#{$prefix}-desktop-mobile .#{$prefix}-shortcut{
        position:relative;
        float:none;
        display: inline-block;
        margin:5px;
    }
    
    .#{$prefix}-desktop-mobile .#{$prefix}-desktop-container {
        padding:10px;
        text-align: center;
        overflow-y: auto;
        margin-bottom:20px;
    }
}
.#{$prefix}-desktop-mobile .#{$prefix}-desktop-container{
    padding-bottom:20px;
}

.#{$prefix}-shortcut-name{
    position:absolute;
    bottom:0px;
    left:0px;
    height:20px;
    line-height: 20px;
    width: 100%;
    font-size:12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center; 
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.#{$prefix}-shortcut-dd-spliter{
    width:72px;
    height:5px;
    background: rgba(255,255,255,0.4);
    position:absolute;
}

.#{$prefix}-desktop-medium .#{$prefix}-shortcut-dd-spliter{
    width:100px;
}

.#{$prefix}-desktop-medium  .#{$prefix}-shortcut{
    height:100px;
    width:100px;
}
.#{$prefix}-desktop-medium .#{$prefix}-shortcut-icon{
    top:20px;
    left:25px;
    height:50px;
    width:50px;
}

.#{$prefix}-desktop-medium .#{$prefix}-shortcut-name{
    height:30px;
    line-height: 30px;
}


.tooltip-inner {
  color: $tipColor;
  text-decoration: none;
  background-color: $tipBgColor;
  border-radius: 0px; }

.tooltip.top .tooltip-arrow {
  border-top-color: $tipBgColor; }

.tooltip.bottom .tooltip-arrow {
  border-bottom-color: $tipBgColor; }

.tooltip.right .tooltip-arrow {
  border-right-color: $tipBgColor; }
